import {
  Box,
  Button,
  Collapse,
  Flex,
  Icon,
  Stack,
  Text,
  useDisclosure,
} from '@chakra-ui/react';
import { ReactNode } from 'react';
import { MdKeyboardArrowRight } from 'react-icons/md';

import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';

import { setCurrentSub } from '../../store/tagSlice';
import { TagType } from '../TagDisplayBox/TagDisplayItemCard';
export interface TagCategory {
  name: string;
  tags?: TagType[];
}
export interface SubCategory {
  category: string;
  subs: TagCategory[];
}
export type TagSubItem = TagCategory | SubCategory;
const SubButton = (props: {
  children: ReactNode;
  onClick?: () => void;
  name?: string;
}) => {
  const { currentSub } = useAppSelector((store) => store.tag);

  return (
    <Button
      isActive={!!props.name && props.name === currentSub}
      onClick={props.onClick}
      boxSize="initial"
      justifyContent="flex-start"
      alignItems="center"
      bg="transparent"
      mb="2"
      py="3"
      ps="4"
      borderRadius="base"
      w="100%"
      _hover={{
        bg: 'base.900',
        _dark: {
          bg: 'base.850',
        },
      }}
      _active={{
        bg: 'base.900',
        transform: 'none',
        borderColor: 'transparent',
        _dark: {
          bg: 'base.850',
        },
      }}
      _focus={{
        boxShadow: 'none',
      }}
    >
      <Text as="div" color="base.300" my="auto" fontSize="sm">
        {props.children}
      </Text>
    </Button>
  );
};
const CollapseSub = (_tag: {
  category: string;
  subs: {
    name: string;
  }[];
}) => {
  const { isOpen, onToggle } = useDisclosure();
  const dispatch = useAppDispatch();
  const { category, subs } = _tag;
  return (
    <>
      <SubButton onClick={onToggle}>
        <Flex align="center" gap={2}>
          {category}
          <Icon
            as={MdKeyboardArrowRight}
            ml="auto"
            transform={isOpen ? 'rotate(90deg)' : 'initial'}
          />
        </Flex>
      </SubButton>
      <Collapse in={isOpen}>
        {subs.map((s) => (
          <SubButton
            key={s.name}
            name={s.name}
            onClick={() => dispatch(setCurrentSub(s.name))}
          >
            {s.name}
          </SubButton>
        ))}
      </Collapse>
    </>
  );
};

const SubContent = () => {
  const { tagSub } = useAppSelector((store) => store.tag);
  const dispatch = useAppDispatch();

  const createButtons = (tagSub: TagSubItem[]) => {
    return tagSub.map((prop: any) => {
      if (prop.category) {
        return (
          <CollapseSub
            key={prop.category}
            category={prop.category}
            subs={prop.subs}
          />
        );
      }
      return (
        <SubButton
          key={prop.name}
          name={prop.name}
          onClick={() => dispatch(setCurrentSub(prop.name))}
        >
          {prop.name}
        </SubButton>
      );
    });
  };

  return (
    <Stack
      direction="column"
      p="4"
      borderRadius={{ base: 'none', md: 'base' }}
      bg="base.950"
      _dark={{ bg: 'base.900' }}
    >
      <Box>{createButtons(tagSub)}</Box>
    </Stack>
  );
};

export default SubContent;
